<!--
 @description 门店新增-经销商收货地址
 @fileName Address.vue
 @author zengqiongying
 @created 2023/04/28 13:54:59
-->
<template>
  <div class="has-foot-pb">
    <Card v-for="(item, i) in list" :key="`${i}-${item.code}`">
      <template #title>
        <div class="card-header">
          <span class="name">
            <span class="icon"></span>收货地址{{ i + 1 }}
            <span v-if="item.changeType === 'B'" class="fw-normal ml8 color-error">(新增)</span>
          </span>
          <span v-if="item.changeType === 'B'" class="btn-del" @click="onDelete(i)"></span>
        </div>
      </template>
      <AddressItemView v-if="item.isBefore === 1 || item.changeType !== 'B'" v-model:modelValue="list[i]" />
      <AddressItem v-else v-model:modelValue="list[i]" />
    </Card>
    <Card>
      <div class="btn-add-larg" @click="onCreat">
        <qmp-icon name="plus" />
        添加新的收货地址
      </div>
    </Card>
    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSave(false)">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { reactive, toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import Card from '@/components/Card/index.vue'
  import AddressItem from '../components/Address/Item.vue'
  import AddressItemView from '../components/Address/ItemView.vue'
  import { addressMixin } from '../mixins/Address'
  import GetKeyboardMixin from '@/utils/useKeyboard'

  export default {
    name: 'DealerNewShopAddress',
    components: { Card, AddressItem, AddressItemView },
    setup() {
      const { proxy }: any = getCurrentInstance()
      const $router = useRouter()
      const $route = useRoute()
      const { datas, getList, onCreat, onDelete, onSave } = addressMixin(() => {
        proxy.$SimpleEvents.emit('refreshCustomerNewShopEditInfo', datas.id)
        nextTick(() => {
          $router.goBack()
        })
      })
      datas.id = $route.query.id || ''
      datas.changeCode = $route.query.changeCode || ''
      datas.keyboard = {
        show: false
      }
      datas.keyboard = GetKeyboardMixin()

      getList()

      return {
        ...toRefs(datas),
        onSave,
        onCreat,
        onDelete
      }
    }
  }
</script>
<style lang="less" scoped>
  @import url('../styles/common.less');
</style>
